
import React,{ Component } from "react";
import ReactDOM from "react-dom";

// import Plugins from '../js/plugins' ;
// import Scripts from '../js/scripts' ; 
// import hammer from '../js/hammer';
// import screenfull from '../js/screenfull.min';
class Phone extends Component{
    componentDidMount(){
        $(document).ready(function(){
            $('#gallery-container').sGallery({
               fullScreenEnabled: true
             })
           });
        
    }
   
    render(){
        
        return(
            <div>  
                 
                 <div id="gallery-container">
    
                        <ul className="items--small">
                            <li className="item"><a href="#"><img src="img/big-1.jpg" alt="" /></a></li>
                            <li className="item"><a href="#"><img src="img/big-2.jpg" alt="" /></a></li>
                            <li className="item"><a href="#"><img src="img/big-3.jpg" alt="" /></a></li>
                            <li className="item"><a href="#"><img src="img/big-4.jpg" alt="" /></a></li>
                            <li className="item"><a href="#"><img src="img/big-5.jpg" alt="" /></a></li>
                            <li className="item"><a href="#"><img src="img/big-6.jpg" alt="" /></a></li>
                            <li className="item"><a href="#"><img src="img/big-7.jpg" alt="" /></a></li>
                            <li className="item"><a href="#"><img src="img/big-8.jpg" alt="" /></a></li>
                            <li className="item"><a href="#"><img src="img/big-9.jpg" alt="" /></a></li>
                            <li className="item"><a href="#"><img src="img/big-10.jpg" alt="" /></a></li>
                            <li className="item"><a href="#"><img src="img/big-11.jpg" alt="" /></a></li>
                            <li className="item"><a href="#"><img src="img/big-12.jpg" alt="" /></a></li>
                        </ul>
                        <ul className="items--big">
                        <li className="item--big">
                            <a href="#">
                            <figure>
                                <img src="img/big-1.jpg" alt="" />
                                <figcaption className="img-caption">
                                Caption
                                </figcaption>
                            </figure>
                            </a>
                        </li>
                        <li className="item--big">
                            <a href="#">
                            <figure>
                                <img src="img/big-2.jpg" alt="" />
                                <figcaption className="img-caption">
                                Caption
                                </figcaption>
                            </figure>
                            </a>
                        </li>
                        <li className="item--big">
                            <a href="#">
                            <figure>
                                <img src="img/big-3.jpg" alt="" />
                                <figcaption className="img-caption">
                                Caption
                                </figcaption>
                            </figure>
                            </a>
                        </li>
                        <li className="item--big">
                            <a href="#">
                            <figure>
                                <img src="img/big-4.jpg" alt="" />
                                <figcaption className="img-caption">
                                Caption
                                </figcaption>
                            </figure>
                            </a>
                        </li>
                        <li className="item--big">
                            <a href="#">
                            <figure>
                                <img src="img/big-5.jpg" alt="" />
                                <figcaption className="img-caption">
                                Caption
                                </figcaption>
                            </figure>
                            </a>
                        </li>
                        <li className="item--big">
                            <a href="#">
                            <figure>
                                <img src="img/big-6.jpg" alt="" />
                                <figcaption className="img-caption">
                                Caption
                                </figcaption>
                            </figure>
                            </a>
                        </li>
                        <li className="item--big">
                            <a href="#">
                            <figure>
                                <img src="img/big-7.jpg" alt="" />
                                <figcaption className="img-caption">
                                Caption
                                </figcaption>
                            </figure>
                            </a>
                        </li>
                        <li className="item--big">
                            <a href="#">
                            <figure>
                                <img src="img/big-8.jpg" alt="" />
                                <figcaption className="img-caption">
                                Caption
                                </figcaption>
                            </figure>
                            </a>
                        </li>
                        <li className="item--big">
                            <a href="#">
                            <figure>
                                <img src="img/big-9.jpg" alt="" />
                                <figcaption className="img-caption">
                                Caption
                                </figcaption>
                            </figure>
                            </a>
                        </li>
                        <li className="item--big">
                            <a href="#">
                            <figure>
                                <img src="img/big-10.jpg" alt="" />
                                <figcaption className="img-caption">
                                Caption
                                </figcaption>
                            </figure>
                            </a>
                        </li>
                        <li className="item--big">
                            <a href="#">
                            <figure>
                                <img src="img/big-11.jpg" alt="" />
                                <figcaption className="img-caption">
                                Caption
                                </figcaption>
                            </figure>
                            </a>
                        </li>
                        <li className="item--big">
                            <a href="#">
                            <figure>
                                <img src="img/big-12.jpg" alt="" />
                                <figcaption className="img-caption">
                                Caption
                                </figcaption>
                            </figure>
                            </a>
                        </li>
                        </ul>
                        <div className="controls">
                        <span className="control icon-arrow-left" data-direction="previous"></span> 
                        <span className="control icon-arrow-right" data-direction="next"></span> 
                        <span className="grid icon-grid"></span>
                        <span className="fs-toggle icon-fullscreen"></span>
                        </div>
                        
                    </div>
            </div>
        )
    }
}
export default Phone;



  
  




